<template>
  <view class="main">
    <scroll-view scroll-y class="scroll">
      <form class="form">
        <view class="form_item">
          <view class="title">收入类型</view>
          <picker @change="incomeChange" :value="incomeIndex" :range="incomePicker" range-key="name">
            <view class="picker">
              {{ incomePicker[incomeIndex].name }}
            </view>
          </picker>
        </view>
        <view v-if="personalShow" class="form_item">
          <view class="title">税前年收入(元)</view>
          <input name="input" type="number" placeholder="0" v-model="taxIncome" />
        </view>
        <view v-if="personalShow" class="form_item">
          <view class="title">社会保险费用</view>
          <input name="input" type="number" placeholder="0" v-model="socialCost" />
        </view>
        <view v-if="personalShow" class="form_item">
          <view class="title">个人所得税免征税额</view>
          <view class="title">
            <text>{{ fiexdBands.toFixed(2) }}</text>
          </view>
        </view>
        <view v-if="personalShow">
          <checkbox-group class="block" @change="childCheck">
            <view class="form_item margin-top">
              <view class="title">
                <text>子女教育</text>
                <text style="color: #666;">(专项附加扣除，含婴幼儿)</text>
              </view>
              <checkbox :class="childBox[0].checked ? 'checked' : ''" :checked="childBox[0].checked ? true : false"
                value="1">
              </checkbox>
            </view>
            <view v-if="childShow" class="form_item">
              <view class="title">子女个数</view>
              <picker @change="childChange" :value="childIndex" :range="childNum" range-key="childIndex">
                <view class="picker">
                  {{ childNum[childIndex] }}
                </view>
              </picker>
            </view>
            <view v-if="childShow" class="form_item">
              <view class="title">扣除方式</view>
              <picker @change="deductChange" :value="deductIndex" :range="deductWay" range-key="deductIndex">
                <view class="picker">
                  {{ deductWay[deductIndex] }}
                </view>
              </picker>
            </view>
            <view v-if="childShow" class="form_item">
              <view class="title">扣除额</view>
              <view class="title">
                <text>{{ childBands.toFixed(2) }}</text>
              </view>
            </view>
          </checkbox-group>
          <checkbox-group class="block" @change="educationCheck">
            <view class="form_item">
              <view class="title">
                <text>继续教育</text>
                <text style="color: #666;">(专项附加扣除)</text>
              </view>
              <checkbox :class="educationBox[0].checked ? 'checked' : ''"
                :checked="educationBox[0].checked ? true : false" value="1"></checkbox>
            </view>
            <view v-if="educationShow" class="form_item">
              <view class="title">教育类型</view>
              <picker @change="educationChange" :value="educationIndex" :range="educationType" range-key="educationIndex">
                <view class="picker">
                  {{ educationType[educationIndex] }}
                </view>
              </picker>
            </view>
            <view v-if="educationShow" class="form_item">
              <view class="title">扣除额</view>
              <view class="title">
                <text>{{ educationBands.toFixed(2) }}</text>
              </view>
            </view>
          </checkbox-group>
          <checkbox-group class="block" @change="illnessCheck">
            <view class="form_item">
              <view class="title">
                <text>大病医疗</text>
                <text style="color: #666;">(专项附加扣除)</text>
              </view>
              <checkbox :class="illnessBox[0].checked ? 'checked' : ''" :checked="illnessBox[0].checked ? true : false"
                value="1">
              </checkbox>
            </view>
            <view v-if="illnessShow" class="form_item">
              <view class="title">扣除额</view>
              <input name="input" type="number" placeholder="0" v-model="illnessBands" />
            </view>
          </checkbox-group>
          <checkbox-group class="block" @change="homeCheck">
            <view class="form_item">
              <view class="title">
                <text>居住扣除</text>
                <text style="color: #666;">(专项附加扣除)</text>
              </view>
              <checkbox :class="homeBox[0].checked ? 'checked' : ''" :checked="homeBox[0].checked ? true : false"
                value="1">
              </checkbox>
            </view>
            <view v-if="homeShow" class="form_item">
              <view class="title">居住类型</view>
              <picker @change="homeChange" :value="homeIndex" :range="homeType" range-key="homeIndex">
                <view class="picker">
                  {{ homeType[homeIndex] }}
                </view>
              </picker>
            </view>
            <view v-if="homeShow && !rentShow" class="form_item">
              <view class="title">扣除额</view>
              <view class="title">
                <text>{{ homeBands.toFixed(2) }}</text>
              </view>
            </view>
            <view v-if="homeShow && rentShow" class="form_item">
              <view class="title">扣除额</view>
              <picker @change="rentChange" :value="rentIndex" :range="rentType" range-key="rentIndex">
                <view class="picker">
                  {{ rentType[rentIndex] }}
                </view>
              </picker>
            </view>
          </checkbox-group>
          <checkbox-group class="block" @change="oldCheck">
            <view class="form_item">
              <view class="title">
                <text>赡养老人</text>
                <text style="color: #666;">(专项附加扣除)</text>
              </view>
              <checkbox :class="oldBox[0].checked ? 'checked' : ''" :checked="oldBox[0].checked ? true : false" value="1">
              </checkbox>
            </view>
            <view v-if="oldShow" class="form_item">
              <view class="title">扣除方式</view>
              <picker @change="oldChange" :value="oldIndex" :range="oldWay" range-key="oldIndex">
                <view class="picker">
                  {{ oldWay[oldIndex] }}
                </view>
              </picker>
            </view>
            <view v-if="oldShow && oldChildShow" class="form_item">
              <view class="title">子女个数</view>
              <picker @change="oldChildChange" :value="oldChildIndex" :range="oldChildNum" range-key="num">
                <view class="picker">
                  {{ oldChildNum[oldChildIndex].num }}
                </view>
              </picker>
            </view>
            <view v-if="oldShow" class="form_item">
              <view class="title">扣除额</view>
              <view class="title">
                <text>{{ oldBands.toFixed(2) }}</text>
              </view>
            </view>
          </checkbox-group>
        </view>
        <!-- 经营所得 -->
        <view v-if="manageShow" class="form_item">
          <view class="title">收入金额</view>
          <input name="input" type="number" placeholder="0" v-model="incomePrice" />
        </view>
        <view v-if="manageShow" class="form_item">
          <view class="title">扣除支出</view>
          <input name="input" type="number" placeholder="0" v-model="deductExpend" />
        </view>
        <view v-if="manageShow" class="form_item">
          <view class="title">月减除费用</view>
          <view class="title">
            <text>{{ monthBands.toFixed(2) }}</text>
          </view>
        </view>
        <view v-if="manageShow" class="form_item">
          <view class="title">经营时间</view>
          <picker @change="manageChange" :value="manageIndex" :range="manageTime" range-key="manageIndex">
            <view class="picker">
              {{ manageIndex > -1 ? manageTime[manageIndex] : '请选择' }}
            </view>
          </picker>
        </view>
        <!-- 劳务报酬所得 -->
        <view v-if="labourShow" class="form_item">
          <view class="title">收入金额</view>
          <input name="input" type="number" placeholder="0" v-model="labourPrice" />
        </view>
        <!-- 稿酬所得 -->
        <view v-if="remunerationShow" class="form_item">
          <view class="title">收入金额</view>
          <input name="input" type="number" placeholder="0" v-model="remunerationPrice" />
        </view>

        <!-- 特权使用费 -->
        <view v-if="privilegeShow" class="form_item">
          <view class="title">收入金额</view>
          <input name="input" type="number" placeholder="0" v-model="privilegePrice" />
        </view>

        <!-- 财产租赁所得 -->
        <view v-if="leaseShow" class="form_item">
          <view class="title">收入金额</view>
          <input name="input" type="number" placeholder="0" v-model="leasePrice" />
        </view>
        <view v-if="leaseShow" class="form_item">
          <view class="title">扣除支出</view>
          <input name="input" type="number" placeholder="0" v-model="leaseDeduct" />
        </view>
        <view v-if="leaseShow" class="form_item">
          <view class="title">修缮费用</view>
          <input name="input" type="number" placeholder="0" v-model="repairPrice" />
        </view>
        <view v-if="leaseShow" class="form_item">
          <view class="title">适用税率</view>
          <picker @change="taxChange" :value="taxIndex" :range="taxPicker" range-key="taxIndex">
            <view class="picker">
              {{ taxPicker[taxIndex] }}
            </view>
          </picker>
        </view>

        <!-- 财产转让所得 -->
        <view v-if="makeOverShow" class="form_item">
          <view class="title">收入金额</view>
          <input name="input" type="number" placeholder="0" v-model="makeOverPrice" />
        </view>
        <view v-if="makeOverShow" class="form_item">
          <view class="title">财产原值</view>
          <input name="input" type="number" placeholder="0" v-model="originalValue" />
        </view>
        <view v-if="makeOverShow" class="form_item">
          <view class="title">合理费用</view>
          <input name="input" type="number" placeholder="0" v-model="reasonableExpend" />
        </view>

        <!-- 偶然所得 -->
        <view v-if="accidentShow" class="form_item">
          <view class="title">收入金额</view>
          <input name="input" type="number" placeholder="0" v-model="accidentPrice" />
        </view>
      </form>
      <view v-if="resultShow" class="tax-result margin-top">
        <view class="tax-title">
          <text>
            计算结果：
          </text>
        </view>
        <view class="tax-text">
          <text>
            应缴税款(元)
          </text>
          <text>
            {{ shouldTax.toFixed(2) }}
          </text>
        </view>
        <view class="tax-text">
          <text>
            税后收入(元)
          </text>
          <text>
            {{ taxOutcome.toFixed(2) }}
          </text>
        </view>
        <view class="tax-text">
          <text>
            应纳税所得额(元)
          </text>
          <text>
            {{ shouldIncome.toFixed(2) }}
          </text>
        </view>
        <view class="tax-text">
          <text>
            适用税率(%)
          </text>
          <text>
            {{ applyTax }}
          </text>
        </view>
        <view v-if="!remunerationShow && !privilegeShow && !leaseShow && !makeOverShow && !accidentShow" class="tax-text">
          <text>
            速算扣除数(元)
          </text>
          <text>
            {{ quickCount.toFixed(2) }}
          </text>
        </view>
        <view v-if="labourShow || remunerationShow || privilegeShow" class="tax-text">
          <text>
            减除费用(元)
          </text>
          <text>
            {{ expendPrice.toFixed(2) }}
          </text>
        </view>
      </view>
    </scroll-view>
    <view class="footer">
      <view class="bottom-btn">
        <view class="reset-btn" @click="resetBtn">
          重 置
        </view>
        <view class="count-btn" @click="countBtn">
          计 算
        </view>
      </view>
    </view>
  </view>
</template>

<script type="text/javascript" src="plus-confusion://../tools/gs/index"></script>


<style lang="scss" scoped>
.main {
  height: 100%;
  overflow-y: auto;

  .scroll {
    height: calc(100vh - 250rpx);
  }

  .form_item {
    background-color: #ffffff;
    padding: 2rpx 30rpx;
    display: flex;
    align-items: center;
    min-height: 100rpx;
    justify-content: space-between;
  }

  .tax-result {
    padding: 0 30rpx;

    .tax-title {
      font-weight: bold;
      font-size: 36rpx;
      color: #333;
    }

    .tax-text {
      margin-top: 30rpx;
      font-size: 32rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .overdue-text {
      display: flex;
      flex-direction: column;
      line-height: 56rpx;
      font-size: 32rpx;
    }
  }

  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 160rpx;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;

    .bottom-btn {
      padding: 0 30rpx;
      flex: 1;
      display: flex;
      justify-content: space-between;

      .reset-btn {
        width: 220rpx;
        height: 90rpx;
        background-color: #f6f6f6;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36rpx;
      }

      .count-btn {
        width: 440rpx;
        height: 90rpx;
        background-color: #2979ff;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 36rpx;
      }
    }
  }
}</style>